<template>
  <div class="homeContainer">
    <!-- 内容区域 -->
    <div class="container index">
      <div class="row">
        <div class="col-xs-8 main">
          <!-- 左侧内容列表 -->
          <div class="listContainer">
            <!-- 文章列表模块 -->
            <ul class="noteList">
              <li
                class="nItem"
                v-for="(article, index) in newsList"
                :key="index"
              >
                <!-- 图片链接 -->
                <a href="" class="wrapImg">
                  <img src="./images/1.png" />
                </a>
                <!-- 文章内容&链接 -->
                <div class="content">
                  <router-link to="/detail" target="_blank" class="title">{{ article.title }}</router-link>
                  <p class="abstract">
                    {{ article.info[0].text }}
                  </p>
                </div>
                <!-- 收藏评论标签 -->
                <div class="meta">
                  <span class="jsMeta">
                    <i class="iconfont icon-diamond"></i>
                    {{ article.diamondNum }}
                  </span>
                  <a href="" class="nickname">
                    {{ article.userInfoData.userName }}
                  </a>
                  <a href="">
                    <i class="iconfont icon-comments"></i>
                    {{ article.wordNumber }}
                  </a>
                  <span>
                    <i class="iconfont icon-likefill"></i>
                    {{ article.accoladesNum }}
                  </span>
                </div>
              </li>
            </ul>
            <!-- 文章列表模块 -->
            <button @click="moreRead" class="loadMore">
              阅读更多
            </button>
          </div>
        </div>
        <!-- 右侧板块 -->
        <div class="col-xs-4 col-xs-offset-1 aside">
          <div class="board">
            <a
              href="https://www.jianshu.com/mobile/campaign/day_by_day/join?from=home"
            >
              <img src="./images/banner-s-daily.png" />
            </a>
            <a href="">
              <img src="./images/banner-s-club.png" />
            </a>
            <a href="">
              <img src="./images/banner-s-5.png" />
            </a>
            <a href="">
              <img src="./images/banner-s-7.png" />
            </a>
          </div>
          <!-- 下载app,鼠标滑动弹出二维码图 -->
          <a href="" class="download">
            <img src="./images/download-index-side.png" />
            <img class="big" src="./images/download-index-side.png" />
            <div class="info">
              <div class="title">
                下载简书手机App
                <i class="iconfont icon-next"></i>
              </div>
              <div class="description">
                随时随地发现和创作内容
              </div>
            </div>
          </a>
          <!-- 轮播图 -->
        <Carsousel></Carsousel>
          <!-- 推荐作者 -->
          <div class="recommendAuthor">
            <div class="authorList">
              <div class="author">
                <span>推荐作者</span>
                <a href="" class="jiazai">
                  <i class="iconfont icon-jiazai_shuaxin_o"></i>
                  换一批
                </a>
              </div>
              <!-- 作者列表 -->
              <ul class="list">
                <li
                  v-for="(authorItem, index) in recommendAuthor.users"
                  :key="index"
                >
                  <a href="" class="avator">
                    <img :src="authorItem.avatar_source" />
                  </a>
                  <a href="" class="plus">
                    <i class="iconfont icon-jiahao"></i>关注
                  </a>
                  <a href="" class="name">{{ authorItem.nickname }}</a>
                  <p>
                    写了{{ authorItem.total_likes_count / 1000 }}字 34.5k喜欢
                  </p>
                </li>
              </ul>
            </div>
            <!-- 查看更多 -->
            <router-link to="/Person" class="more">
              查看全部
              <i class="iconfont icon-next"></i>
            </router-link>
          </div>
          <!-- 广告位轮播图 -->

          <!-- 抽奖弹窗 -->
          <div class="lucky" ref="choujiang">
            <div class="luckyImg">
              抽奖
              <img src="./images/close_luck.png" alt="" @click="remove"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div class="goTop">
      <a href="#">
        <i class="iconfont icon-dingbu"></i>
      </a>
    </div>
    <!-- 底部区域 -->
    <footer class="container">
      <div class="row">
        <div class="col-xs-17 main">
          <a href="https://www.jianshu.com/c/jppzD2">关于简书</a>
          <em> · </em>
          <a href="https://www.jianshu.com/c/jppzD2">联系我们</a>
          <em> · </em>
          <a href="https://www.jianshu.com/c/jppzD2">加入我们</a>
          <em> · </em>
          <a href="https://www.jianshu.com/c/jppzD2">简书出版</a>
          <em> · </em>
          <a href="https://www.jianshu.com/c/jppzD2">品牌与徽标</a>
          <em> · </em>
          <a href="https://www.jianshu.com/c/jppzD2">帮助中心</a>
          <em> · </em>
          <a href="https://www.jianshu.com/c/jppzD2">合作伙伴</a>
          <em> · </em>
          <a href="https://www.jianshu.com/c/jppzD2">涂檬-原创插画社区</a>

          <div class="icp">
            ©2012-2021 上海佰集信息科技有限公司 /简书 /
            <a href="https://beian.miit.gov.cn/">沪ICP备11018329号-5 /</a>
            <a
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402002252"
            >
              <!-- <img src="./images/smrz.png" class="smrz" /> -->
            </a>
            <a
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402002252"
              class="asmrz"
            >
              沪公网安备31010402002252号 /
            </a>
            <a href="">
              <img src="./images/wxb.png" class="wxb" />
            </a>
            <a href="">
              <img src="./images/weifa.jpg" class="weifa" />
            </a>
            <i>简书网举报邮箱：help@jianshu.com</i>
            <em>举报电话：18510346566 /</em>
            <a href="">
              <img src="./images/fanzha.jpg" class="fangzha" />
            </a>
            <p>
              亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听
              /
            </p>
            <a href="">
              <img src="./images/zggsrz.png" class="zggsrz" />
            </a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
//

export default {
  name: "Homepage",
  mounted() {
    this.$store.dispatch("getIndexData");
    // console.log(this);
  },
  computed: {
    ...mapState({
      initData: (state) => {
        state.home.initData;
        // console.log(state);
      },
    }),
    ...mapGetters(["newsList", "recommendAuthor"]),
  },
  methods: {
    moreRead(){
      this.newsList.forEach((item) => {
        this.newsList.push(item);
      })
    },
    remove(){
      const choujiang = this.$refs.choujiang
      choujiang.style.display = "none"
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 960px;
}
.index .row {
  display: flex;
  justify-content: center;
}
// 文章列表样式
.index .main {
  padding-top: 30px;
}
.noteList li {
  width: 100%;
  position: relative;
  margin: 0 0 15px;
  padding: 15px 2px 20px 0;
  border-bottom: 1px solid #f0f0f0;
  word-wrap: break-word;
}
.noteList li .wrapImg {
  width: 150px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -60px;
  height: 100px;
}
.noteList li .wrapImg img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
}
.noteList li .content {
  padding-right: 165px;
}
.noteList li .content .title {
  font-size: 18px;
  font-weight: 700;
  display: inherit;
  margin: -7px 0 4px;
  line-height: 1.5;
}
.noteList li .content .abstract {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 24px;
  color: #999;
}
// 收藏评论标签
.noteList .meta {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  //   padding-right: 0;
}
.noteList .meta span {
  margin-right: 10px;
  color: #b4b4b4;
}
.noteList .meta a {
  margin-right: 10px;
  color: #b4b4b4;
}
.iconfont {
  font-family: iconfont !important;
  font-size: inherit;
  font-style: normal;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
}
.jsMeta {
  color: #ea6f5a !important ;
}

.loadMore {
  width: 100%;
  background-color: #a5a5a5;
  border-radius: 20px;
  height: 40px;
  margin: 30px auto 60px;
  padding: 10px 15px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  display: block;
}
// 右侧板块样式
.aside {
  padding: 30px 0 0;
}
.index .aside .board {
  margin-top: -4px;
  padding-bottom: 4px;
  height: 228px;
}
.index .aside .board img {
  width: 100%;
  height: 50px;
  margin-bottom: 6px;
  border-radius: 4px;
}
// 下载链接样式
.index .aside .download{
  display: block;
  margin-bottom: 30px;
  padding: 10px 22px;
  width: 100%;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  background-color: #fff;
  position: relative;
  
}
.index .aside .download img {
  width: 60px;
  height: 60px;
  opacity: 0.85;
  
}
.index .aside .download .big{
  transition: all .5s linear;
  position: absolute;
  width: 200px;
  height: 0px;
  opacity: 0;
  left: 50px;
  top: -200px;
}
.index .aside .download:hover .big{
  opacity: 1;
  height:200px;
}
.index .aside .download .info {
  position: absolute;
  left: 100px;
  top: 10px;
}
.aside .download .info .title {
  font-size: 15px;
  color: #333 !important;
  margin-bottom: 5px;
}
.aside .download .info .description {
  font-size: 13px;
  color: #999;
}
// 推荐作者
.authorList .author {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}
.authorList .author .jiazai {
  color: #999;
}
.authorList .list li {
  position: relative;
}
.authorList .list .avator img {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #f0f0f0;
  border-radius: 25px;
}
.authorList .list .name {
  position: absolute;
  left: 60px;
  top: 15px;
  font-size: 14px;
}
.authorList .list p {
  position: absolute;
  left: 60px;
  top: 40px;
  font-size: 12px;
  color: #999;
}
.authorList .list .plus {
  position: absolute;
  right: 0;
  top: 15px;
  font-size: 13px;
  color: #42c02e;
  margin-top: 5px;
}
.recommendAuthor .more {
  display: inline-block;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background-color: #f7f7f7;
  color: #787878;
  width: 100%;
  height: 35px;
  line-height: 35px;
  margin: 20px 0;
  text-align: center;
  font-size: 13px;
}
// 抽奖盒子
.lucky {
  position: fixed;
  bottom: 90px;
  left: calc((100vw + 724px) / 2 - 78px);
  height: 40px;
  width: 94px;
}
.lucky .luckyImg {
  background-image: url(./images/download_app.png);
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 14px;
  color: #ffd875;
  font-weight: 400;
  padding: 11px 0 0 51px;
  position: relative;
}
.lucky .luckyImg img {
  position: absolute;
  right: -13px;
  top: -13px;
  width: 16px;
}
// 底部样式
footer {
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
}
footer .row {
  padding-top: 25px;
}
footer .main a {
  // width: 100%;
  font-size: 13px;
  color: #969696;
}
.main .icp {
  position: relative;
}
footer .icp,
footer .icp a {
  font-size: 12px;
  color: #c8c8c8;
  margin: 10px 0;
}
footer .icp img {
  height: 30px;
}
img {
  vertical-align: middle;
}
.icp i {
  position: absolute;
  right: 390px;
  top: 38px;
}
.icp em {
  position: absolute;
  left: 0;
  top: 70px;
}
.icp p {
  display: block;
  position: absolute;
  right: 119px;
  top: 70px;
  line-height: 24px;
}
.icp .asmrz {
  display: inline-block;
  position: absolute;
  left: 449px;
  top: -9px;
}
.icp .smrz {
  position: absolute;
  right: 508px;
  top: 0;
}
.icp .wxb {
  position: absolute;
  left: 0;
  top: 30px;
}
.icp .weifa {
  position: absolute;
  left: 180px;
  top: 30px;
}
.icp .fangzha {
  position: absolute;
  left: 153px;
  top: 62px;
}
.icp .zggsrz {
  position: absolute;
  right: 85px;
  top: 66px;
}
// 回到顶部
.goTop {
  border: 1px solid #f0f0f0;
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1040;
}
.goTop a {
  display: block;
  width: 60px;
  height: 60px;
  font-size: 20px;
  text-align: center;
  color:hotpink
}
// 轮播
</style>
